<template>
  <div id="wrapper">
      <div class="bg"></div>
      <el-card class="login-box">
<!--          <div slot="header" class="clearfix">-->
<!--              <span style="font-size: 20px; font-weight: 600;">欢迎登陆</span>-->
<!--          </div>-->
          <el-tabs v-model="activeName">
              <el-tab-pane label="登陆" name="1"></el-tab-pane>
              <el-tab-pane label="注册" name="2"></el-tab-pane>
          </el-tabs>
          <el-form ref="form" :model="form" label-width="70px" :rules="rules" v-if="activeName === '1'" key="form">
              <el-form-item label="用户名" prop="userName">
                  <el-input prefix-icon="el-icon-user" v-model="form.userName"  placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="passWord">
                  <el-input prefix-icon="el-icon-lock" type="password" v-model="form.passWord" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="记住密码">
                   <el-checkbox name="type" v-model="remember"></el-checkbox>
              </el-form-item>
              <div style="position: absolute; bottom: 20px; left: 20px; right: 20px;">
                  <el-button type="primary" @click="openHome" style='width: 100%'>登录</el-button>
              </div>
          </el-form>
          <el-form ref="payForm" :model="payForm" label-width="70px" :rules="payRules" v-else key="payForm">
              <el-form-item label="用户名" prop="userName">
                  <el-input prefix-icon="el-icon-user" v-model="payForm.userName"  placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="passWord">
                  <el-input prefix-icon="el-icon-lock" type="password" v-model="payForm.passWord" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="卡密" prop="khamwi">
                  <el-input prefix-icon="el-icon-lock" v-model="payForm.khamwi" placeholder="请输入卡密"></el-input>
              </el-form-item>
<!--              <el-form-item>-->
<!--                  <el-popover-->
<!--                          placement="top-start"-->
<!--                          width="280"-->
<!--                          trigger="click">-->
<!--                      <img style="width: 100%;" src="../assets/wx.jpg" alt="二维码">-->
<!--                      <el-button slot="reference"> 购买卡密</el-button>-->
<!--                  </el-popover>-->
<!--              </el-form-item>-->
              <div style="position: absolute; bottom: 20px; left: 20px; right: 20px;">
                  <el-button type="primary" @click="payFormSubmit" style='width: 100%'>充值</el-button>
              </div>
          </el-form>
      </el-card>
  </div>
</template>

<script>
  // import func from '../../../vue-temp/vue-editor-bridge'
  // import { app, BrowserWindow, session } from 'electron'
  const {remote, session,app,shell } = window.require('electron')
  const ipc = window.require('electron').ipcRenderer;
  const config = require('../../config/config');
  const targetUrl = config.SERVER.HOST;
  const packageInfo = require('../../../package');
  export default {
    name: 'landing-page',
    components: {},
    data() {
      return {
        activeName: '1',
        form: {
          userName: '',
          passWord: ''
        },
        payForm: {
          userName: '',
          passWord: '',
          khamwi: ''
        },
        errorInfo: {
          userName: '',
          passWord: ''
        },
        rules: {
          userName: [{
            required: true, message: '请输入用户名', trigger: 'blur'
          }],
          password: [{
            required: true, message: '请输入密码', trigger: 'blur'
          }],
        },
        payRules: {
          userName: [{
            required: true, message: '请输入用户名', trigger: 'blur'
          }],
          password: [{
            required: true, message: '请输入密码', trigger: 'blur'
          }],
          khamwi: [{
            required: true, message: '请输入卡密', trigger: 'blur'
          }],
        },
        remember: false
      }
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      openHome () {
        this.$refs['form'].validate((valid) => {
            localStorage.setItem('token','');
          if (valid) {
            this.$http({
              method: 'POST',
              url: targetUrl + '/client/login',
              headers: {
                'Content-Type': 'application/json',
                'X-User-System-ID': 'CLIENT_USER'
              },
              data: {
                username: this.form.userName,
                password: this.form.passWord
              },
            }).then((res) => {
              let {code, token, msg} = res.data
              if (code === 200) {
                localStorage.setItem('token', JSON.stringify(token))
                ipc.send('login', token)
                this.setUserInfo()
                this.$router.push('/home')
              } else {
                alert(msg)
              }
            });
          }
        })
      },
      //充值
      payFormSubmit () {
        this.$refs['payForm'].validate((valid) => {
          if (valid) {
            this.$http({
              method: 'PUT',
              url: targetUrl + '/client-users/recharge',
              headers: {
                'Content-Type': 'application/json',
                'X-User-System-ID': 'CLIENT_USER'
              },
              data: {
                username: this.payForm.userName,
                password: this.payForm.passWord,
                activationCode: this.payForm.khamwi
              },
            }).then((res) => {
              let {code, token, msg} = res.data
              if (code === 200) {
                this.$message.success('充值成功')
                this.$refs['payForm'].resetFields();
              } else {
                alert(msg)
              }
            })
          }
        })
      },
      // 获取cookie
      getCookie (key) {
        // if (document.cookie.length > 0) {
        //   var start = document.cookie.indexOf(key + "=");
        //   if (start !== -1) {
        //     start = start + key.length + 1;
        //     var end = document.cookie.indexOf(";", start);
        //     if (end === -1) end = document.cookie.length;
        //     return unescape(document.cookie.substring(start, end));
        //   }
        // }
        return localStorage.getItem(key) || ''
      },
      // 保存cookie
      setCookie (cName, value, expiredays) {
        localStorage.setItem(cName, value)
        // var exdate = new Date();
        // exdate.setDate(exdate.getDate() + expiredays);
        // document.cookie =
        //   cName +
        //   "=" +
        //   decodeURIComponent(value) +
        //   (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
      },
      // 储存表单信息
      setUserInfo () {
        // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
        // 如果没有勾选，储存的信息为空
        if (this.remember) {
          this.setCookie("userName", this.form.userName, 7);
          // base64加密密码
          let passWord = this.form.passWord;
          this.setCookie("passWord", passWord, 7);
          this.setCookie("remember", this.remember, 7);
        } else {
          this.setCookie("userName", "");
          this.setCookie("passWord", "");
        }
      },
      checkVersion(){
          localStorage.setItem('token','');
          this.$http({
              method: 'GET',
              url: targetUrl + '/client-version/getVersion'
          }).then((res) => {
              let {code,msg,data} = res.data;
              if(!data){
                  return;
              }
              if(code !== 200){
                  this.$alert('服务器异常', '警告', {
                      confirmButtonText: '确定',
                      callback: action => {
                      }
                  });
              }else{
                  if(packageInfo.version !== data.version){
                      this.$alert(data.remake, '升级提示', {
                          confirmButtonText: '更新',
                          dangerouslyUseHTMLString:true,
                          callback: async (action) => {
                              await shell.openExternal(data.downloadUrl);
                              window.close();
                          }
                      });
                  }
              }
          }).catch((err) => {
              this.$alert('服务器连接失败', '警告', {
                  confirmButtonText: '确定',
                  callback: action => {
                      window.close();
                  }
              });
          })
      }
    },
    created() {
      // 在页面加载时从cookie获取登录信息
      let userName = this.getCookie("userName");
      let passWord = this.getCookie("passWord");
      if (userName) {
        this.form.userName = userName;
        this.form.passWord = passWord;
        this.remember = true;
      }

      this.checkVersion();
    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Source Sans Pro', sans-serif;
  }

  ::-moz-selection {
    background: transparent;
  }

  ::selection {
    background: transparent;
  }

  #wrapper {
    background: #eef3f7;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: linear-gradient(to bottom, #4a8cef 0%, #4a8cef 51%, transparent 50%, transparent 100%); */
    overflow: hidden;
  }

  #wrapper .bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(../assets/bg1.jpg) /*center center no-repeat*/;
      background-size: cover;
      /*filter: blur(2px);*/
  }

  .login-box {
    width: 50%;
    height: 380px;
    position: relative;
    /*background-color: rgba(0, 0, 0, 0.1);*/
    /*border-radius: 4px;*/
    /*box-shadow: 0 2px 4px #4a8cef;*/
    /*padding: 0 80px;*/
  }

  .login-box .login-title {
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
    font-size: 20px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    letter-spacing: 3px;
    margin: 30px 0;
  }

  .login-form .input-item {
    height: 40px;
    position: relative;
    margin: 40px 0;
  }

  .login-form .input-item input {
    height: 100%;
    width: 100%;
    padding-left: 40px;
    outline: none;
    border-radius: 4px;
    border: 0;
    background: #ffffff;
    margin-bottom: 4px;
  }

  .login-form .input-item span {
    height: 100%;
    width: 20px;
    position: absolute;
    left: 10px;
    background: url("../assets/user.png") no-repeat center center;
  }

  .login-form .input-item i {
    color: #f10215;
    font-style: normal;
  }

  .login-form .password span {
    background: url("../assets/password.png") no-repeat center center;
  }

  .login-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 18px;
    margin-right: 10px;
    position: relative;
  }


  .login-form input[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #4a8cef;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #4a8cef;
    border-radius: 4px;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
  }

  .login-form .input-item .btn {
    height: 100%;
    width: 100%;
    padding-left: 0 !important;
    outline: none;
    border-radius: 6px;
    border: 0;
    color: #ffffff;
    font-size: 16px;
    background: #4a8cef !important;
  }
</style>
